<template>
  <div class="ly-drop-down">
    <slot name="dropdown-link"></slot>
    <slot name="dropdown"></slot>
  </div>
</template>
<script>
import Vue from "vue";
export default {
  name: "lyDropdown",
  data() {
    return {
      initNub: Math.floor(Math.random() * 3000 + 1),
      domId: undefined,
    };
  },
  mounted() {
    this.$bus.on('itemClick',(e)=>{
      this.$emit('command',e)
    })
    let _this = this; 
    //  复制dropdown Vnode
    const linkDom = this.$slots["dropdown-link"][0].elm;
    const vNode = this.$slots["dropdown"];
    let children = this.$children;
    // 移除dropdownDOM结构
    for (let i = 0; i <= children.length; i++) {
      if (
        children[i] &&
        children[i].$options._componentTag === "ly-dropdown-menu"
      ) {
        this.$el.removeChild(children[i].$el);
      }
    }
    linkDom.addEventListener("mouseenter", (e) => {
      const rect = linkDom.getBoundingClientRect();
      if (!this.domId || !document.getElementById(`${this.domId}`)) {
        // drop-menu未挂载 则生成
        let dropDown = Vue.extend();
        let dropDownDom = new dropDown({
          render() {
            return vNode;
          },
        });
        let el = dropDownDom.$mount().$el;
        this.domId = `drop-menu-${this.initNub}`;
        el.setAttribute("id", `drop-menu-${this.initNub}`);
        el.style.cssText = `top:${rect.bottom + document.documentElement.scrollTop}px;left:${rect.left+document.documentElement.scrollLeft}px;min-width:${rect.width}px`;
        document.body.appendChild(el);
      } else {
        // drop-menu已挂载 则显示
        document.getElementById(
          `${this.domId}`
        ).style.cssText = `top:${rect.bottom + document.documentElement.scrollTop}px;left:${rect.left+document.documentElement.scrollLeft}px;min-width:${rect.width}px`;
      }
      const dropPopDom = document.getElementById(`${this.domId}`);
      const minWidth = rect.left + document.documentElement.scrollLeft
      const MaxWidth = rect.right + document.documentElement.scrollLeft
      const moveFN = (e)=>{
        const minHeight = rect.top + document.documentElement.scrollTop
        const maxHeight =
          rect.bottom +
          dropPopDom.getBoundingClientRect()
            .height + document.documentElement.scrollTop;
            console.log(rect.bottom , document.documentElement.scrollTop)
        if (
          e.pageX > minWidth &&
          e.pageX < MaxWidth &&
          e.pageY > minHeight &&
          e.pageY < maxHeight
        ) {
         dropPopDom.style.cssText = `top:${rect.bottom+document.documentElement.scrollTop}px;left:${rect.left+document.documentElement.scrollLeft}px;min-width:${rect.width}px`;
        } else {
          dropPopDom.style.cssText = "";
          // 移除监听事件
          window.removeEventListener('mousemove',moveFN)
        }
      }
      // 1.鼠标进入dropdown-link 显示drop-menu
      // 2.监听mousemove事件 计算drop-menu显示条件范围
      // 3.如果条件范围不满足 隐藏drop-menu且移除mousemove监听事件
      window.addEventListener("mousemove", moveFN);
    });
    linkDom.addEventListener("mouseleave", () => {
      if (this.domId && document.getElementById(`${this.domId}`)) {
        document.getElementById(`${this.domId}`).style.cssText = "";
      }
    });
  },
  methods:{
    getElementToPageTop(el) {
      if(el.parentElement) {
        return this.getElementToPageTop(el.parentElement) + el.offsetTop
      }
      return el.offsetTop
    }
  }
};
</script>
<style lang="scss">
.ly-drop-down {
  display: inline-block;
}
</style>